<template>
	<div class="movie">
		<div class="top">movie</div>
		<div class="main">
			<div v-show='!isShow' class="loading">loading</div>

			<div v-show='isShow'>
				<div class="title top">
					<span>{{title}}:</span>
					<span>{{count}}/{{total}}</span>
				</div>
				<div class="list">
					<ul>
						<li v-for='i of list'>
							<div class="content">
								<div class="left">
									<img :src="i.images.large">
									<!-- images -->
								</div>
								<div class="right">
									<li>{{i.title}}/{{i.year}}/{{i.genres}}</li>
									<li>评分:{{i.rating}}</li>
									<li>链接:<a :href="i.alt"></a></li>
									<!-- alt：详情链接 -->
									<li>
										导演:{{i.directors[0].name}}
										<!-- <img :src="i.directors[0].avatars.small"> -->
									</li>
									<li>
										主要演员:
										<!-- 演员:{{i.casts}} -->
										<div v-for='j in i.casts' class="casts">
											<span>{{j.name}}</span>
											<!-- <img :src="j.avatars.small"> -->
										</div>
									</li>

								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>

		</div>
		<foot></foot>
		<!-- 不允许：<footer></footer> -->
	</div>
</template>
<script type="text/javascript">
	import $ from 'jquery'
    import footer from '../public/footer'
	export default {
		components:{
			'foot':footer
			// footer 关键字 不能在html中做标签
		},
		data(){
			return {
				title:'',
				count:'',
				total:'',
				list:'',
				start:'',

				status:400,

				isShow:false
			}
		},
		created:function () {
			// setTimeout(function (argument) {
			// 	this.isShow = !this.isShow;
			// },1000);
			// vue-axios 请求数据
			// vuex 管理数据，方便组件之间的数据交互
            var _this = this;
            // 豆瓣电影
            var url = 'https://api.douban.com/v2/movie/in_theaters';
            this.axios.get(url).then(function (data) {
            	if (data) {
            		_this.isShow = !_this.isShow;
            		_this.status = data.status;
            	}
        		var data = data.data;

        	 	_this.title = data.title;
                _this.count = data.count;
                _this.total = data.total;
                _this.list = data.subjects;
                _this.start = data.start;
            }).catch(function (err) {
            	console.log(err)
            })
        },
        methods:{
            
        }
        //  mounted
	}
</script>
<style scoped>
	@import '../../assets/css/movie.css'
</style>